<template>
  <div id="left-top-board">
    <div class="center-board-title">周转编制使用率</div>
    <div id="myEchart"></div>
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      myEchart: null
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.zzbz.getZzbzUseRate({
          dep_code: this.depCode
        })
        console.log(res)
        var v1 = res.SYRY
        var v2 = res.BZSUM

        const option = {
          title: [
            {
              text: Math.round((v1 / v2) * 100) + '%',
              textStyle: {
                color: '#eee',
                fontSize: 35
              },
              itemGap: 20,
              left: '37.5%',
              top: '36%'
            },
            {
              text: '已使用',
              textStyle: {
                color: '#ccc',
                fontSize: 24,
                fontWeight: 'normal'
              },
              itemGap: 20,
              left: '37.5%',
              top: '50%'
            }
          ],
          grid: [
            {
              top: '80',
              width: '100%',
              left: '20',
              containLabel: true
            }
          ],
          tooltip: {
            trigger: 'item'
          },
          angleAxis: {
            polarIndex: 0,
            min: 0,
            max: 100,
            show: false,
            // boundaryGap: ['40%', '40%'],
            startAngle: 90
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          polar: [
            {
              center: ['50%', '50%'], //中心点位置
              radius: '140%' //图形大小
            }
          ],
          series: [
            {
              type: 'bar',
              z: 10,
              name: '已使用',
              data: [Math.round((v1 / v2) * 100)],
              tooltip: {
                trigger: 'item',
                formatter: function (params) {
                  return '已使用：' + v1 + '名'
                }
              },
              showBackground: false,
              backgroundStyle: {
                borderWidth: 10,
                width: 10
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: '10%', //大的占比环
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#18c8ff'
                }
              }
            },
            {
              type: 'pie',
              name: '总量',
              radius: ['75%', '65%'],
              center: ['50%', '50%'], //中心点位置
              startAngle: 90,
              hoverAnimation: false,
              clockWise: true,
              avoidLabelOverlap: true,
              hoverOffset: 2,
              tooltip: {
                trigger: 'item',
                formatter: function (params) {
                  return '总量：' + v2 + '名'
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgba(32,187,252,0.15)',
                  shadowBlur: 0,
                  shadowColor: '#66666a'
                }
              },
              label: {
                show: false
              },
              data: [100]
            }
          ]
        }
        this.myEchart = this.$echarts.init(document.getElementById('myEchart'))
        this.myEchart.setOption(option)
        window.addEventListener('resize', () => this.myEchart.resize(), false)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
#left-top-board {
  width: 20%;
  box-sizing: border-box;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    border-bottom: #336699 1px solid;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }
}
#myEchart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
